<template>
	<view class="mine-container" :style="{height: `${windowHeight}px`}">
		<!--顶部个人信息栏-->
		<view class="header-section">
			<view class="flex padding justify-between">
				<view class="flex align-center">
					<view v-if="!avatar" class="cu-avatar xl round bg-white">
						<view class="iconfont icon-people text-gray icon"></view>
					</view>
					<image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round"
						mode="widthFix">
					</image>
					<view v-if="!name" @click="handleToLogin" class="login-tip">
						点击登录
					</view>
					<view v-if="name" @click="handleToInfo" class="user-info">
						<view class="u_title">
							用户名：{{ name }}
						</view>
					</view>
				</view>
				<view @click="handleToInfo" class="flex align-center">
					<text>个人信息</text>
					<view class="iconfont icon-right"></view>
				</view>
			</view>
		</view>

		<view class="content-section">
			<view class="mine-actions grid col-4 text-center">
				<view class="action-item" @click="handleJiaoLiuQun">
					<view class="iconfont icon-friendfill text-pink icon"></view>
					<text class="text">交流群</text>
				</view>
				<view class="action-item" @click="handleBuilding">
					<view class="iconfont icon-service text-blue icon"></view>
					<text class="text">在线客服</text>
				</view>
				<view class="action-item" @click="handleBuilding">
					<view class="iconfont icon-community text-mauve icon"></view>
					<text class="text">反馈社区</text>
				</view>
				<view class="action-item" @click="handleBuilding">
					<view class="iconfont icon-dianzan text-green icon"></view>
					<text class="text">点赞我们</text>
				</view>
			</view>

			<view class="menu-list">
				<view class="list-cell list-cell-arrow" @click="handleToEditInfo">
					<view class="menu-item-box">
						<view class="iconfont icon-user menu-icon"></view>
						<view>编辑资料</view>
					</view>
				</view>
				<view class="list-cell list-cell-arrow" @click="handleHelp">
					<view class="menu-item-box">
						<view class="iconfont icon-help menu-icon"></view>
						<view>常见问题</view>
					</view>
				</view>
				<view class="list-cell list-cell-arrow" @click="handleHelp">
					<view class="menu-item-box">
						<view class="iconfont icon-yonghuxieyi menu-icon"></view>
						<view>用户协议</view>
					</view>
				</view>
				<view class="list-cell list-cell-arrow" @click="handleAbout">
					<view class="menu-item-box">
						<view class="iconfont icon-lianxiwomen menu-icon"></view>
						<view>联系我们</view>
					</view>
				</view>
				<view class="list-cell list-cell-arrow" @click="handleToSetting">
					<view class="menu-item-box">
						<view class="iconfont icon-setting menu-icon"></view>
						<view>应用设置</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {ref, reactive, onMounted , inject, getCurrentInstance, computed } from 'vue';
	import { useStore } from 'vuex';
	import storage from '@/utils/storage';
	
	// 获取全局配置
	const { appContext } = getCurrentInstance();
	const $tab = appContext.config.globalProperties.$tab;
	const $modal = appContext.config.globalProperties.$modal;
	const globalConfig = inject('globalData')

	// 获取store实例
	const store = useStore();
	// 定义响应式数据
	const name = ref('');
	const version = ref('');
	const avatar = computed(() => store.state.user?.avatar || '');
	const windowHeight = computed(() => uni.getSystemInfoSync().windowHeight - 50);

	onMounted(() => {
		if (store.state.user) {
			name.value = store.state.user.name;
		}
		if (globalConfig.config && globalConfig.config.appInfo) {
			version.value = globalConfig.config.appInfo.version;
		}
	});

	const handleToInfo = () => {
		$tab.navigateTo('/pages/mine/info/info');
	};
	const handleToEditInfo = () => {
		$tab.navigateTo('/pages/mine/info/edit');
	};
	const handleToSetting = () => {
		$tab.navigateTo('/pages/mine/setting/setting');
	};
	const handleToLogin = () => { 
		$tab.reLaunch('/pages/login/login');
	};
	const handleToAvatar = () => {
		$tab.navigateTo('/pages/mine/avatar/avatar');
	};
	const handleLogout = () => {
		$modal.confirm('确定注销并退出系统吗？').then(() => {
			store.dispatch('LogOut').then(() => {
				$tab.reLaunch('/pages/index/index');
			});
		});
	};
	const handleHelp = () => {
		$tab.navigateTo('/pages/mine/help/help');
	};
	const handleAbout = () => {
		$tab.navigateTo('/pages/mine/about/about');
	};
	const handleJiaoLiuQun = () => {
		$modal.showToast('微信群：');
	};
	const handleBuilding = () => {
		$modal.showToast('模块建设中~');
	};
</script>

<style lang="scss">
	@import url("mine.scss");
</style>